<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sb" uri="/struts-bootstrap-tags"%>

<s:include value="/WEB-INF/content/common/header.jsp"></s:include>

<div class="row-fluid" id="switchPanel">
	<div class="span6">
		<ul class="unstyled">
			<s:iterator value="switchList" status="rowNumber">
				<s:if test="#rowNumber.index % 6 == 0 && #rowNumber.index > 0">
		</ul>
	</div>
	<div class="span6">
		<ul class="unstyled" id="buttonSet">
			</s:if>
			<li class="test" style="margin-bottom:4px"><div id="animated-switch" class="make-switch" 
					data-animated="true" data-on="success" data-off="danger">
					<s:checkbox name="%{id}" id="%{id}" value="%{fieldValue}"
						onchange="javascript:changeOperation(this);" autocomplete="off"/>
				</div> <small><s:property value="name" /></small></li>

			</s:iterator>
		</ul>
	</div>
</div>
<s:url var="jsonUrl" action="view-switch-status-json.html" namespace="/switches"></s:url>

<script>
	var getRate = 5000;
	var OFF_STYLE = "switch-off";
	var ON_STYLE = "switch-on";
	
	function getSwitchStatus() {
		
		var panelId = "<s:property value='%{panelId}'/>";
        var obj = $.ajax({
	        url: "<s:property value='jsonUrl'/>",
	        cache: true,
	        type: "POST",
	       data: "panelId="+panelId/*+" &timeStamp="+new Date().getTime() */,
	        success: function (result) {
	        $.each(result.switchList, function() {
				//remove all styles ON or OFF	        	
	        	$("#"+this.id).parent().removeClass( ON_STYLE + " " + OFF_STYLE );
                
	        	if(this.currentState == "0"){
                	$("#"+this.id).prop('checked',false);
                	$("#"+this.id).parent().addClass( OFF_STYLE );   //set OFF class at parent element DIV
                }else{
                	$("#"+this.id).prop('checked',true);
                	$("#"+this.id).parent().addClass( ON_STYLE );   ////set ON class at parent element DIV
                }
	            });
	        },
	        error: function (xhr, ajaxOptions, thrownError) {
	        }
	    });
	
		setTimeout("getSwitchStatus()", getRate);
		
	}
	
	$(document).ready(function() {
		/*setTimeout("getSwitchStatus()", getRate);*/
		getSwitchStatus();
	});
</script>

